<template>
  <div id="select-country-area">
    <i-select
      @on-change="change"
      style="width: 120px; margin: 0 5px"
      v-model="queryOption.search1"
      size="small"
      :placeholder="$t('views.public.country')"
    >
      <i-option
        v-for="item in queryOption.search1Arr"
        :value="item.id"
        :key="item.id"
      >{{ item.country_name }}
      </i-option
      >
    </i-select>
  </div>
</template>
<script>
import dictionary from '@/js/dictionary.js';
import {mapGetters} from "vuex";

export default {
  props: {
    selectType: {
      type: String,
      default: '',
    },
    isSet: {
      type: Boolean,
      default: false
    },
    // 上一级routeName 兼容新窗口打开页面拿不到country_ids
    routeName:{
      type:String,
      default:''
    },
    // getApiCountry 是否从接口获取
    getApiCountry:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      queryOption: {
        search1: -1,
        search1Arr: [],
      },
    };
  },
  created() {
    if (this.getApiCountry){
      this.$store.dispatch('getCountryList').then(res => {
        this.queryOption.search1Arr = res
      })
      return
    }
    let rname = this.routeNam != '' ? this.routeName : null
    // console.log(rname)
    let autheCountry =JSON.parse(this.$autheCountry(1,rname))
    // console.log(autheCountry)
    this.$store.dispatch('getCountryList').then(res => {
      console.log(autheCountry)
      if (this.isSet) {
        if(autheCountry.indexOf(10000)>-1){
          this.queryOption.search1Arr = res
        }else {
          res.forEach((ie)=>{
            if (autheCountry.indexOf(ie.id)>-1||ie.id==0){
              this.queryOption.search1Arr.push(ie)
            }
          })
        }

      } else if (!this.selectType) this.queryOption.search1Arr = res;
      else this.queryOption.search1Arr = this.getAreaCountryList[this.selectType];

    });
  },
  computed: {
    ...mapGetters(['getLocale', 'getAreaCountryList']),
  },
  methods: {
    getSearch1Arr() {
      return dictionary.optCountryArr.call(this);
    },
    change(value) {
      this.$emit('change', {
        value: value,
        // label: this.queryOption.search1Arr[value].label,
      })
    },
  },
  watch: {
    selectType() {
      this.$store.dispatch('getCountryList').then(res => {
        if (!this.selectType) this.queryOption.search1Arr = res;
        else this.queryOption.search1Arr = this.getAreaCountryList[this.selectType];
      });
    },
  },
}
</script>
<style lang="scss" scoped>

</style>
